<template>
  <div class="home-container" :class="buttonKey">
    <div
      class="home-header"
      :class="[buttonKey == 'CompanyProfile' && 'company']"
    >
      <div class="home-text" v-if="buttonKey != 'CompanyProfile'"></div>
      <div class="weather" v-if="buttonKey != 'CompanyProfile'">
        <span class="location"></span>
        <span>{{ gpsData.city }}&nbsp</span>
        <span>{{ gpsData.weather }}&nbsp</span>
        <span>{{ gpsData.temperature }}℃</span>
      </div>
      <div class="header-right">
        <div class="date">
          <span>{{ getNowDate() }} </span>
        </div>
        <div
          class="back-home"
          v-if="
            [
              'GroupProfile',
              'CompanyProfile',
              'GIS',
              'EngineeringManage',
              'extendSystem',
            ].includes(buttonKey)
          "
          @click="backHome()"
          title="返回首页"
        ></div>
        <div class="read" @click="handleDownload()" title="操作手册"></div>
        <div class="system" @click="gotoSystem()" title="进入系统"></div>
        <div class="close" @click="handleLogout()" title="退出系统"></div>
      </div>
    </div>
    <div class="home-body">
      <GIS
        :visible="buttonKey == 'GIS'"
        :extra="comExtra"
        ref="components"
        v-if="buttonKey == 'GIS'"
      ></GIS>
      <components
        v-else
        :is="componentKey"
        :visible="componentVisible"
        @onMenu="onMenu"
        :soucre="soucre"
      ></components>
    </div>

    <div
      class="home-tabs"
      :class="isKeys.includes(buttonKey) ? 'hide' : 'show'"
    >
      <div
        class="home-tabs-warp normal"
        :class="[` ${buttonKey == 'GIS' && 'hide'}`]"
      >
        <!-- 首页 -->
        <div
          :class="[`tabs-button ${buttonKey == 'Home' && 'active-tabs-1'}`]"
          @click="handleActive('Home')"
        >
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">首页</div>
        </div>
        <!-- 集团概况 -->
        <!-- <div
          :class="
            `tabs-button ${buttonKey == 'GroupProfile' && 'active-tabs-2'}`
          "
          @click="handleActive('GroupProfile')"
        >
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">集团概况</div>
        </div> -->
        <!-- 项目直通车 -->
        <div
          :class="
            `tabs-button ${buttonKey == 'ProjectTrain' && 'active-tabs-3'}`
          "
          @click="handleActive('ProjectTrain')"
        >
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">项目直通车</div>
        </div>
        <!-- 项目管理 -->
        <div :class="`tabs-button`" @click="gotoSystem()">
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">项目管理</div>
        </div>
      </div>

      <!-- 港区数字孪生 -->
      <div
        class="home-tabs-warp digital-twin-warp"
        v-if="comExtra != 'EngineeringManage'"
        :class="[` ${buttonKey != 'GIS' && 'hide'}`]"
      >
        <!-- 港区实景 -->
        <div
          class="tabs-button"
          :class="digitalKey == 'LiveAction' && 'active-tabs-1'"
          @click="handleDigitalActive('LiveAction')"
        >
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">港区实景</div>
        </div>

        <!-- 规划管理 -->
        <div
          class="tabs-button"
          :class="digitalKey == 'PlanningManage' && 'active-tabs-2'"
          @click="handleDigitalActive('PlanningManage')"
        >
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">规划管理</div>
        </div>

        <!-- 动态监测 -->
        <div
          class="tabs-button"
          :class="digitalKey == 'DynamicMonitor' && 'active-tabs-3'"
          @click="handleDigitalActive('DynamicMonitor')"
        >
          <div class="tabs-group">
            <div class="icon-ring"></div>
            <div class="tabs-icon"></div>
          </div>
          <div class="tabs-name">项目千里眼</div>
        </div>
      </div>
    </div>
    <div
      class="home-footer"
      v-if="comExtra != 'EngineeringManage'"
      :class="isKeys.includes(buttonKey) ? 'hide' : 'show'"
    ></div>
    <!-- 两侧背景虚线 -->
    <div class="dotted-bg l"></div>
    <div class="dotted-bg r"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "ecfcb87ee130b34b5f0d25862f5ef080",
};
import { mapActions } from "vuex";
//首页
import Home from "./components/home";
//集团概况
import GroupProfile from "./components/groupProfile";
//项目直通车
import ProjectTrain from "./components/projectTrain";
//公司简介
import CompanyProfile from "./components/companyProfile";
//扩展系统
import extendSystem from "./components/extendSystem";
//基建板块数据看板
import EngineeringManage from "./components/engineeringManage";

import { pageDestroy } from "@/blackHole/Engine";
//gis
import GIS from "./components/GIS";
export default {
  provide() {
    return {
      digitalKey: () => this.digitalKey,
    };
  },
  data() {
    return {
      comExtra: "",
      componentKey: "Home",
      buttonKey: "Home",
      componentVisible: true,
      soucre: {},
      digitalKey: "LiveAction",
      //是否显示底部
      isKeys: [
        "CompanyProfile",
        "GroupProfile",
        "EngineeringManage",
        "extendSystem",
      ],
      //天气时间
      gpsData: {},
    };
  },
  components: {
    Home,
    GroupProfile,
    ProjectTrain,
    CompanyProfile,
    GIS,
    extendSystem,
    EngineeringManage,
  },
  computed: {
    activeClass() {
      let { buttonKey } = this;
      if (buttonKey == "GIS") {
        let refs = this.$refs["components"];
        return refs.componentKey;
      } else {
        return "";
      }
    },
  },
  mounted() {
    //查询天气
    this.getWeatherByCity().then((res) => {
      this.gpsData = res;
    });
    //
    let { key = "Home" } = this.$route.query;
    this.componentKey = key;
    this.buttonKey = key;
  },
  methods: {
    onMenu(ev) {
      this.soucre = ev;
    },

    ...mapActions(["Logout"]),

    handleDownload() {
      window.open(
        "https://dpmp.jkec.info/docs/数字项目管理平台用户操作手册.pdf"
      );
    },
    //进入系统
    gotoSystem() {
      this.$router
        .push({
          path: "/system/portal/index",
          query: {
            type: "login",
          },
        })
        .catch(() => {
          console.log("登录跳转首页出错,这个错误从哪里来的");
        });
    },

    //退出登录
    handleLogout() {
      let that = this;
      this.$confirm({
        title: "提示",
        content: "真的要注销登录吗 ?",
        okText: "确认",
        cancelText: "取消",
        closable: true,
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk: () => {
          return this.Logout({})
            .then(() => {
              setTimeout(() => {
                // window.location.reload();
                this.$router.push({
                  path: "/user/login?type=private",
                });
              }, 16);
            })
            .catch((err) => {
              this.$message.error({
                title: "错误",
                description: err.message,
              });
            });
        },
        onCancel() {},
      });
    },

    //返回首页
    backHome() {
      this.digitalKey = "LiveAction";
      this.handleActive("Home");
    },
    //返回工程项目管理
    backProject() {
      this.handleActive("EngineeringManage");
    },

    //模块切换【数字孪生】
    handleDigitalActive(key) {
      this.digitalKey = key;
      let refs = this.$refs["components"];
      refs.handleActive(key);
    },

    //模块切换
    handleActive(key, extra) {
      this.comExtra = extra || "";
      console.log({ key, extra });
      if (this.buttonKey == key) {
        this.componentVisible = true;
        return;
      }
      this.buttonKey = key;
      this.componentVisible = false;
      setTimeout((_) => {
        if (key != "GIS") {
          this.componentKey = key;
        }
        this.componentVisible = true;
      }, 300);
    },

    //查询指定城市的天气
    getWeatherByCity(city = "连云港市") {
      return new Promise((resolve, reject) => {
        AMapLoader.load({
          key: "4a9b32384ac2ef8437f61e2357874137", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            //创建天气查询实例
            let weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getLive(city, function(err, data) {
              if (err) {
                reject(err);
              } else {
                resolve(data);
              }
            });
          })
          .catch();
      });
    },
    //查询当前日期
    getNowDate() {
      let date = new Date();
      const YY = date.getFullYear();
      const MM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      const DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      const weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const dayIndex = date.getDay();
      let nowDate =
        YY + "年" + MM + "月" + DD + "日" + " " + weekdays[dayIndex];
      return nowDate;
    },
  },
  beforeDestroy() {
    this.digitalKey = "LiveAction";
    pageDestroy();
  },
};
</script>

<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url(~@/assets/img/portalEntry/home_bg.png);
  background-size: 100% 100%;
  &.GroupProfile,
  &.ProjectTrain {
    background: url(~@/assets/img/portalEntry/home_bg_2.png);
    background-size: 100% 100%;
  }
  &.EngineeringManage {
    background: url(~@/assets/img/portalEntry/home_bg_3.png);
    background-size: 100% 100%;
  }

  .home-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    background: url(~@/assets/img/portalEntry/home_header.png);
    background-size: 100% 100%;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #91deff;
    z-index: 99;
    pointer-events: none;
    .home-text {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 51px;
      background: url(~@/assets/img/portalEntry/home_text.png);
      background-size: 100% 100%;
    }

    .weather {
      position: absolute;
      top: 70px;
      left: 40px;
      display: flex;
      align-items: center;
      display: none;
      .location {
        display: inline-block;
        width: 14px;
        height: 16px;
        background: url(~@/assets/img/portalEntry/location.png);
        background-size: 100% 100%;
        margin-right: 10px;
      }
    }

    .header-right {
      position: absolute;
      top: 68px;
      right: 40px;
      display: flex;
      align-items: center;
      .date {
        position: relative;
        margin-right: 32px;
        &::before {
          content: "";
          width: 1px;
          height: 16px;
          background: #000000;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -17px;
        }
        &::after {
          content: "";
          width: 1px;
          height: 16px;
          background: #e0f8ff;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -16px;
        }
      }
      .project-back {
        margin-right: 15px;
        width: 18px;
        height: 18px;
        background: url(~@/assets/img/portalEntry/project.png);
        background-size: 100% 100%;
        cursor: pointer;
        pointer-events: all;
      }

      .back-home {
        margin-right: 15px;
        width: 18px;
        height: 18px;
        background: url(~@/assets/img/portalEntry/back_home.png);
        background-size: 100% 100%;
        cursor: pointer;
        pointer-events: all;
        position: relative;
        top: -2px;
      }
      .system,
      .read {
        margin-right: 15px;
        width: 18px;
        height: 18px;
        background: url(~@/assets/img/portalEntry/system.png);
        background-size: 100% 100%;
        cursor: pointer;
        pointer-events: all;
      }
      .close {
        cursor: pointer;
        width: 18px;
        height: 18px;
        background: url(~@/assets/img/portalEntry/clsoe.png);
        background-size: 100% 100%;
        pointer-events: all;
      }
      .read {
        background: url(~@/assets/img/portalEntry/read.png);
        background-size: 100% 100%;
      }
    }

    &.company {
      height: 0;
      background: unset;
      .header-right {
        top: 10px;
      }
    }
  }
  .home-body {
    color: #ffffff;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 23;
  }
  .home-tabs {
    z-index: 25;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transition: 0.3s;
    .home-tabs-warp {
      display: flex;
      align-items: center;
      transform: translateX(-50%);
      transition: 0.3s;
      position: absolute;
      bottom: -14px;
      &.normal {
        &.hide {
          bottom: -150px;
        }
        .tabs-button {
          &:nth-child(1) {
            .tabs-group {
              .tabs-icon {
                background: url(~@/assets/img/portalEntry/tabs_icon_1.png);
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(2) {
            margin: 0 120px;
            .tabs-group {
              .tabs-icon {
                background: url(~@/assets/img/portalEntry/tabs_icon_3.png);
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(3) {
            .tabs-group {
              .tabs-icon {
                background: url(~@/assets/img/portalEntry/tabs_icon_7.png);
                background-size: 100% 100%;
              }
            }
          }
          &.active-tabs-1 {
            .tabs-group {
              .icon-ring {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_ring.png);
                background-size: 100% 100%;
                animation: rotateAni 10s linear infinite;
              }
              .tabs-icon {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_active_icon_1.png);
                background-size: 100% 100%;
              }
            }
            .tabs-name {
              color: #fee193;
            }
          }
          &.active-tabs-7 {
            .tabs-group {
              .icon-ring {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_ring.png);
                background-size: 100% 100%;
                animation: rotateAni 10s linear infinite;
              }
              .tabs-icon {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_active_icon_7.png);
                background-size: 100% 100%;
              }
            }
            .tabs-name {
              color: #fee193;
            }
          }
          &.active-tabs-3 {
            .tabs-group {
              .icon-ring {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_ring.png);
                background-size: 100% 100%;
                animation: rotateAni 10s linear infinite;
              }
              .tabs-icon {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_active_icon_3.png);
                background-size: 100% 100%;
              }
            }
            .tabs-name {
              color: #fee193;
            }
          }
        }
      }
      &.digital-twin-warp {
        &.hide {
          bottom: -150px;
        }
        .tabs-button {
          &:nth-child(1) {
            .tabs-group {
              .tabs-icon {
                background: url(~@/assets/img/portalEntry/tabs_icon_4.png);
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(2) {
            margin: 0 120px 0 120px;
            .tabs-group {
              .tabs-icon {
                background: url(~@/assets/img/portalEntry/tabs_icon_5.png);
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(3) {
            .tabs-group {
              .tabs-icon {
                background: url(~@/assets/img/portalEntry/tabs_icon_6.png);
                background-size: 100% 100%;
              }
            }
          }
          &.active-tabs-1 {
            .tabs-group {
              .icon-ring {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_ring.png);
                background-size: 100% 100%;
                animation: rotateAni 10s linear infinite;
              }
              .tabs-icon {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_active_icon_4.png);
                background-size: 100% 100%;
              }
            }
            .tabs-name {
              color: #fee193;
            }
          }
          &.active-tabs-2 {
            .tabs-group {
              .icon-ring {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_ring.png);
                background-size: 100% 100%;
                animation: rotateAni 10s linear infinite;
              }
              .tabs-icon {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_active_icon_5.png);
                background-size: 100% 100%;
              }
            }
            .tabs-name {
              color: #fee193;
            }
          }
          &.active-tabs-3 {
            .tabs-group {
              .icon-ring {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_ring.png);
                background-size: 100% 100%;
                animation: rotateAni 10s linear infinite;
              }
              .tabs-icon {
                transition: 0.5s;
                background: url(~@/assets/img/portalEntry/tabs_active_icon_6.png);
                background-size: 100% 100%;
              }
            }
            .tabs-name {
              color: #fee193;
            }
          }
        }
      }
    }
    &.hide {
      bottom: -120px;
    }
    .tabs-button {
      cursor: pointer;
      .tabs-group {
        width: 100px;
        height: 100px;
        position: relative;
        .icon-ring {
          height: 100%;
          width: 100%;
        }
        .tabs-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 78px;
          height: 78px;
        }
      }
      .tabs-name {
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #e3f1ff;
      }
    }
  }

  @keyframes rotateAni {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .home-footer {
    width: 1718px;
    height: 64px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background: url(~@/assets/img/portalEntry/home_footer.png);
    background-size: 100% 100%;
    transition: 0.3s;
    z-index: 23;
    pointer-events: none;
    &.hide {
      bottom: -64px;
    }
  }
  .dotted-bg {
    position: absolute;
    width: 13px;
    height: calc(100% - 106px);
    bottom: 28px;
    &.l {
      left: 20px;
      background: url(~@/assets/img/portalEntry/dotted-l.png);
      background-size: 100% 100%;
    }
    &.r {
      right: 20px;
      background: url(~@/assets/img/portalEntry/dotted-r.png);
      background-size: 100% 100%;
    }
  }
}
</style>
